<template>
  <div class="bg">
    <nav-com
      title="广告收益"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-pull-refresh
      v-model='isLoading'
      @refresh='onRefresh'
    >
      <div class="top-bg">
        <div class="top-detail">
          <div class="top-main">
            <div>
              <div class="text">当前广告创收总额</div>
              <div class="num">{{dataInfo.money}}</div>
              <div class="text">昨日广告创收总额</div>
              <div class="num">{{dataInfo.yest_money}}</div>
            </div>
            <div style="border-right:1px solid #eee;width:2px;height:12vh"></div>
            <!-- <div style="">
            <img src="../../../assets/my/ad-icon.png" style="margin-left:55px;width:18px">
            <div style="font-size:13px">预计我的广告创收金额</div>
            <div class="num">{{dataInfo.my_money}}</div>
          </div> -->
            <div>
              <div
                class="text"
                style="color:#000"
              >预计我的广告创收金额</div>
              <div class="num">{{dataInfo.my_money}}</div>
              <div
                class="text"
                style="color:#000"
              >昨日我的广告创收金额</div>
              <div class="num">{{dataInfo.yest_user_money}}</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="list-box"
          v-for="(item, index) in dataList"
          :key="index"
        >
          <div style="font-size: 16px; font-weight:700; padding:10px 20px;border-bottom: 1px solid rgba(0, 0, 0, 0.1);background: url('../../../assets/my/ad-icon.png') no-repeat;
    background-size: 8% 60%;">{{item.name}}</div>
          <div class="list-box-all">
            <div class="box-left">
              <div v-if="item.name.indexOf('周') !='-1'"><span style='color:#FE4B20;font-size:40px'>·</span>本周广告创收总额</div>
              <div v-else><span style='color:#FE4B20;font-size:40px'>·</span>当前广告创收总额</div>
              <div style="margin-left:4vw">{{item.money}}</div>
              <div v-if="item.name.indexOf('周') !='-1'"><span style='color:#2AAAEB;font-size:40px'>·</span>上周广告创收总额</div>
              <div v-else><span style='color:#FE4B20;font-size:40px'>·</span>昨日广告创收总额</div>
              <div style="margin-left:4vw">{{item.yest_money}}</div>
            </div>
            <!-- <div class="box-right">
              <img src="../../../assets/my/ad-icon.png" style="margin-left:00px;width:18px">
              <div style="font-size:14px">预计我的广告创收金额</div>
              <div style="color:#FE4B20">{{item.my_money}}</div>
            </div> -->
            <div class="box-left">
              <div v-if="item.name.indexOf('周') !='-1'"><span style='color:#FE4B20;font-size:40px'>·</span>本周广告创收总额</div>
              <div v-else><span style='color:#FE4B20;font-size:40px'>·</span>预计广告创收金额</div>
              <div style="margin-left:4vw">{{item.my_money}}</div>
              <div v-if="item.name.indexOf('周') !='-1'"><span style='color:#2AAAEB;font-size:40px'>·</span>上周广告创收总额</div>
              <div v-else><span style='color:#FE4B20;font-size:40px'>·</span>昨日广告创收金额</div>
              <div style="margin-left:4vw">{{item.yest_user_money}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-bg">
        <div class="top-detail">
          <div style="text-align:center;padding-top:10px;font-size:18px;">一星网店主周创收</div>
          <div class="top-main">
            <div>
              <div class="text">本周广告创收总额</div>
              <div class="num">{{weekData.money}}</div>
              <div class="text">上周广告创收总额</div>
              <div class="num">{{weekData.yest_money}}</div>
            </div>
            <div style="border-right:1px solid #eee;width:2px;height:8vh"></div>
            <!-- <div style="">
            <img src="../../../assets/my/ad-icon.png" style="margin-left:55px;width:18px">
            <div style="font-size:13px">预计我的广告创收金额</div>
            <div class="num">{{dataInfo.my_money}}</div>
          </div> -->
            <div>
              <div
                class="text"
                style="color:#000"
              >预计广告创收金额</div>
              <div class="num">{{weekData.my_money}}</div>
              <div
                class="text"
                style="color:#000"
              >上周广告创收金额</div>
              <div class="num">{{weekData.yest_user_money}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>

  </div>

</template>

<script>
import { getAdProfit, getAdvertisingRevenue } from "@/api/api";
import navCom from "@/component/nav";
import Loading from "@/component/loading";
import { Toast } from "vant";
export default {
  components: {
    navCom,
    Loading,
  },
  data() {
    return {
      showView: true,
      isLoading: false,
      dataInfo: {},
      dataList: [],
      weekData: {}
    };
  },
  filters: {
    roleFilter(val) {
      let roleName = {
        1: "推广员",
        2: "代言人",
        3: "一星网店经销商",
        4: "二星网店经销商",
        5: "银牌经销商",
        6: "金牌经销商",
        7: "钻石经销商",
      };
      return roleName[val];
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getAdvertisingRevenue()
        .then((result) => {
          if (result.data.code == 1) {
            this.dataInfo = result.data.data.total_list;
            let dataList = result.data.data.list;
            this.weekData = result.data.data.one
            this.dataList = dataList;
          } else {
            Toast(result.data.msg);
          }
        })
        .catch((err) => {});
    },
    //返回
    backHandler() {
      if(weixin.isAndroid()){
        window.JS_TROOPS.goBack()
      }else{
        this.$router.go(-1);
      }
    },
    onRefresh() {
      this.isLoading = false;
    },
  },
};
</script>

<style scoped>
.bg {
  min-height: 100vh;
  background: #fff9f7;
}
.top-bg {
  background: url("../../../assets/ADbg.png");
  min-height: 38vw;
  padding: 5vw;
  background-repeat: round;
}
.top-bg .top-detail {
  background-color: #fff;
  min-height: 35vw;
  border-radius: 2vw;
  /* align-content: center; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.top-bg .top-detail .top-main {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 1vw 2vw;
  min-height: 35vw;
  text-align: center;
}
.top-bg .top-detail div .text {
  text-align: center;
  color: #808080;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 3.2vh;
}
.top-bg .top-detail div div .num {
  /* display: flex; */
  align-items: center;
  font-size: 16px;
  line-height: 30px;
  color: #fe4b20;
  display: block;
  /* width: 100px; */
}
.num {
  text-align: center;
  font-size: 18px;
  color: #fe4b20;
}
.list-box {
  background: #fff;
  border-radius: 10px;
  margin: 2vw auto;
  width: 95vw;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.list-box .list-box-all {
  margin-top: 2vw;
  color: #808080;
  font-size: 14px;
  padding: 1vw 1vw;
  display: flex;
  justify-content: space-around;
}
.list-box .list-box-all .box-left {
  line-height: 26px;
}
.list-box .list-box-all .box-left div {
  display: flex;
  align-items: center;
}
.list-box .list-box-all .box-right {
  margin-left: 0vw;
  text-align: center;
  margin-top: 3vw;
  font-size: 16px;
  color: #000;
}
</style>